<template>
	<view>

		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">证件信息</text>
			</view>
			<view class="contentBox">
				<view class="textItem">
					<text>注册日期:</text>
					<text style="color: #333;">{{carInfo.drivingLicenseValidityDate|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>行驶证照片:</text>
					<text v-if="cerList.length == 0" style="color: #333;">--</text>
				</view>
				<view style="margin-left: 30rpx;" v-if="cerList.length > 0">
					<u-album :urls="cerList" multipleSize="100"></u-album>
				</view>
			</view>

		</view>

		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">车辆信息</text>
			</view>
			<view class="contentBox">
				<view class="textItem">
					<text>车辆状态:</text>
					<text style="color: #333;">{{carInfo.carStatus|carStatus}}</text>
				</view>
				<view class="textItem">
					<text style="width: 150rpx;">车型信息:</text>
					<text style="color: #333;">{{carInfo.carInfo|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>车牌号:</text>
					<text style="color: #333;">{{carInfo.carNo|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>车架号:</text>
					<text style="color: #333;">{{carInfo.vinNo|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>发动机号:</text>
					<text style="color: #333;">{{carInfo.engineNo|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>归属门店:</text>
					<text style="color: #333;">{{carInfo.belongingStoreName|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>停靠门店:</text>
					<text style="color: #333;">{{carInfo.locatedStoreName|filterNull}}</text>
				</view>
			</view>

		</view>

		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">资产信息</text>
			</view>
			<view class="contentBox">
				
				<view class="textItem">
					<text>车辆来源:</text>
					<text style="color: #333;">{{carInfo.source|vehicleSource}}</text>
				</view>
				<view class="textItem">
					<text>供应商:</text>
					<text style="color: #333;">{{carInfo.supplierName|filterNull}}</text>
				</view>
			</view>
		</view>

		<view class="boxContrainer">
			<view class="titlBox">
				<text class="title">维保信息</text>
			</view>
			<view class="contentBox">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item, index) in datalist" :key="index" @click="businessClick(item.code)">
						<view class="layout">
							<view class="layout-circle">
								<image :src="'/static/weibao/'+item.icon+'.png'"></image>
							</view>
							<text>{{item.name|filterNull}}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		apiCarInfo
	} from '@/api/car-api.js'
	import settings from '@/settings.js'
	export default {
		data() {
			return {
				carId: '',
				cerList: [],
				carInfo: {},
				datalist: [{
						name: '保险信息',
						count: 0,
						code: 1,
						icon: 'baoxian'
					},
					{
						name: '保养信息',
						count: 0,
						code: 2,
						icon: 'baoyang'
					},
					{
						name: '年检信息',
						count: 0,
						code: 3,
						icon: 'nianjian'
					},
					{
						name: '维修信息',
						count: 0,
						code: 4,
						icon: 'weixiu'
					},
					// {
					// 	name: '出险信息',
					// 	count: 0,
					// 	code: 5,
					// 	icon:'chuxian'
					// },
					{
						name: 'GPS设备',
						count: 0,
						code: 6,
						icon: 'gps'
					},
					{
						name: '违章信息',
						count: 0,
						code: 7,
						icon: 'weizhang'
					},
					{
						name: '加油记录',
						count: 0,
						code: 8,
						icon: 'jiayou'
					}

				],
				carOwnerData:[
					{
						name: '订单记录',
						count: 0,
						code: 9,
						icon: 'order'
					},
					{
						name: '借出记录',
						count: 0,
						code: 10,
						icon: 'jianchu'
					},
					{
						name: '托管记录',
						count: 0,
						code: 11,
						icon: 'tuoguan'
					}
				]
			}
		},
		computed:{
			roleType() {
				return this.$store.state.user.roleType;
			}
		},
		onLoad(op) {
			this.carId = op.carId;
			this.getData();
			if(this.roleType == 2) {//车主端
			  this.datalist = [...this.datalist, ...this.carOwnerData];
			}
		},
		methods: {
        
			getData() {
				apiCarInfo(this.carId).then(res => {
					this.carInfo = res.data;
					// this.$set(this.carInfo, 'maintainanceTip', '还有200天保养')
					if(this.carInfo.source == 6 && this.roleType == 1){
							this.datalist.push({
							name: '托管记录',
							count: 0,
							code: 11,
							icon: 'tuoguan'
						})
					}
					if (this.carInfo.drivingLicenseImgFront) {
						this.cerList.push(settings.baseImageUrl + this.carInfo.drivingLicenseImgFront);
					}
					if (this.carInfo.drivingLicenseImgBack) {
						this.cerList.push(settings.baseImageUrl + this.carInfo.drivingLicenseImgBack);
					}
				})
			},


			businessClick(code) {
				let params = uni.$u.queryParams(this.carInfo, true, 'indices');
				switch (code) {
					case 1: //保险信息
						uni.navigateTo({
							url: './insurance/detail' + params
						})
						break;
					case 2: //维修保养信息
						uni.navigateTo({
							url: './maintainance/detail' + params
						})
						break;
					case 3: //年检信息
						uni.navigateTo({
							url: './inspection/detail' + params
						})
						break;
					case 4: //维修信息
						uni.navigateTo({
							url: './repair/detail' + params
						})
						break;
					case 5: //出险信息
						uni.navigateTo({
							url: './outdanger/detail' + params
						})
						break;
					case 6: //GPS离线信息
						uni.navigateTo({
							url: './gps/detail' + params
						})
						break;
					case 7: //违章信息
						uni.navigateTo({
							url: './illegal/list?carId=' + this.carId
						})
						break;
					case 8: //加油记录
						uni.navigateTo({
							url: './refuel/refuelRecord?carId=' + this.carId + '&carNo='+ this.carInfo.carNo
						})
						break;
					case 9: //订单记录
						uni.navigateTo({
							url: './carOwner/orderRecord?carId=' + this.carId
						})
						break;
					case 10: //借出记录
						uni.navigateTo({
							url: './carOwner/lendRecord?carId=' + this.carId
						})
						break;
					case 11: //托管记录
						uni.navigateTo({
							url: './carOwner/trusteeshipRecord?carId=' + this.carId
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		align-items: center;
		justify-content: center;

		.layout-circle {
			width: 85rpx;
			height: 85rpx;
			// background-image: linear-gradient(135deg, #F3F8FE, #A2C7FF);
			// border-radius: 50%;
			display: inline-flex;
			align-items: center;
			justify-content: center;

			text {
				color: $blue15;
			}

			image {
				width: 65%;
				height: 65%;
			}
		}

		text {
			font-size: 26rpx;
			color: $black33;
			margin-top: 8rpx;

		}
	}
</style>
